<style scoped>    
  .but {
    padding:10px;
    float:right
  }.content {
    overflow: scroll;
  }
  .sctpwz{
    float: left;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px #f0f0f0 solid;
    font-size: 18px;
    padding-left: 5px;
  }
  .imgandvideo{
    float: left;
    width: 100%;
    min-height: 130px;
  }
  .ivleft{
    float: left;
    padding: 5px 0px;
    width: 100%;
    height: auto;
  }
</style>
<style lang="stylus" scoped>
.hd-upload
  display flex
  width 100%
  flex-flow wrap
.hd-upload-card
  position relative
  flex 0 0 32%
  box-sizing border-box
  border 1px dashed #c0ccda
  background-color #fbfdff
  border-radius 6px
  text-align center
  margin .05rem
.hd-upload-card-img
  position relative
  flex 0 0 32%
  margin .05rem
  height 2.4rem
  img
    height 100%
    width 100%
    border 1px solid #ebebeb
  &-bash
    position absolute
    bottom 0
    background-color rgba(88, 88, 88, 0.73)
    color #ffffff
    width 100%
    height .5rem
    text-align center
    font-size .4rem
.hd-upload-card-a
  line-height 2.2rem
.hd-img-auto
  width 100%
  height 100%
</style>
<template>    
  <div class="content"> 
    <yd-cell-group style="margin-bottom:0">
      <yd-cell-item>
        <span slot="left">标题：</span>
        <yd-input slot="right" v-model="title" placeholder="请输入游记标题"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">人均费用：</span>
        <yd-input slot="right" v-model="money" placeholder="请输入人均费用￥" type="number"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">目的地：</span>
        <yd-input slot="right" v-model="destination" placeholder="请输入目的地" type="text"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">出发时间：</span>
        <yd-input slot="right" v-model="tour_date" placeholder="请输入相关人物" type="date"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">出行天数：</span>
        <yd-input slot="right" v-model="day" placeholder="请输入出游天数" type="number"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">标签：</span>
        <yd-input slot="right" v-model="label" placeholder="标签" type="text"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">人物：</span>
        <yd-input slot="right" v-model="personal_relationship" placeholder="选择人物" type="text" @click.native="show1 = true"></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <!-- 上传图片 -->
    <div class="sctpwz">上传封面图片</div>
    <div class="imgandvideo">
      <div class="ivleft">
        <div class="hd-upload">
          <!-- 显示图片部分 -->
          <div class="hd-upload-card-img" v-for="(item, index) in imgArr" :key="index">
            <img :src="item">
            <div class="hd-upload-card-img-bash" @click="deleteImage(index)">
              <i class="yd-icon-home"></i>
            </div>
          </div>
          <!-- 自定义上传组件 -->
          <div class="hd-upload-card hd-upload-card-a" v-show="imgArr.length == 0">
            <i class="yd-icon-star" style="font-size: 0.6rem; color: rgb(255, 104, 93);"></i>
            <hd-upload @filesChange="imageChange" />
          </div>
        </div>
      </div>
    </div>
    <!-- <yd-radio-group v-model="personal_relationship">
      <span style="font-size:14px;padding-left:.24rem;line-height:3">人物：</span>
      <yd-radio val="0">一个人</yd-radio>
      <yd-radio val="1">情侣/夫妻</yd-radio>
      <yd-radio val="2">亲子</yd-radio>
      <yd-radio val="3">家庭出游</yd-radio>
      <yd-radio val="4">和朋友</yd-radio>
      <yd-radio val="5">其他</yd-radio>
    </yd-radio-group> -->
    <!-- <yd-flexbox>
      <div><span style="font-size:16px;padding-left:.24rem;line-height:3">人物：</span></div>
      <yd-flexbox-item>
        <yd-radio-group v-model='personal_relationship'>
          <yd-radio val='0' >一个人</yd-radio>
          <yd-radio val='1' >情侣/夫妻</yd-radio>
          <yd-radio val='2' >亲子</yd-radio>
          <yd-radio val='4' >和朋友</yd-radio>
          <yd-radio val='3' >家庭出游&nbsp;</yd-radio>
          <yd-radio val='5' >其他</yd-radio>
        </yd-radio-group>
      </yd-flexbox-item>
    </yd-flexbox> -->
    <vue-html5-editor :content="content" :height="400"    
     @change="updateData">
    </vue-html5-editor>  
    <div class="but" @click="submit">
      <yd-button type="primary">提交</yd-button>
    </div> 
    <!-- 弹出框 -->
    <yd-popup v-model="show1" position="bottom" height="30%">
        <yd-cell-group title="请选择人物">
            <yd-cell-item type="radio">
                <span slot="left">一个人</span>
                <input slot="right" type="radio" value="一个人" v-model="personal_relationship"/>
            </yd-cell-item>

            <yd-cell-item type="radio">
                <span slot="left">情侣、夫妻</span>
                <input slot="right" type="radio" value="情侣、夫妻" v-model="personal_relationship"/>
            </yd-cell-item>
            <yd-cell-item type="radio">
                <span slot="left">亲子</span>
                <input slot="right" type="radio" value="亲子" v-model="personal_relationship"/>
            </yd-cell-item>

            <yd-cell-item type="radio">
                <span slot="left">家庭出游</span>
                <input slot="right" type="radio" value="家庭出游" v-model="personal_relationship"/>
            </yd-cell-item>
            <yd-cell-item type="radio">
                <span slot="left">和朋友</span>
                <input slot="right" type="radio" value="和朋友" v-model="personal_relationship"/>
            </yd-cell-item>
            <yd-cell-item type="radio">
                <span slot="left">其他</span>
                <input slot="right" type="radio" value="其他" v-model="personal_relationship"/>
            </yd-cell-item>

            <!-- <yd-cell-item>
                <span slot="left">选中的值：</span>
                <span slot="right">{{roomnum}}</span>
            </yd-cell-item> -->
        </yd-cell-group>
    </yd-popup> 
  </div>    
</template>    
<script>
  import {upLoadFileByBase64, dataURLtoBlob} from 'hdc/mixin'
  export default {
    mixins: [
      upLoadFileByBase64,
      dataURLtoBlob
    ],
    data() {
      return {
        title: '',
        content: '',
        money: '',
        destination: '',
        tour_date: '',
        day: '',
        personal_relationship: '一个人',
        label: '',
        show1: false,
        imgArr: [],
        data: {},
        id: this.$route.query.id
      }
    },
    mounted: function () {
      // console.log(this.id)
      if (this.id) {
        this.hdAjax({
          url: this.API.getTravelsByUserInfo,
          method: 'POST',
          data: {
            id: this.id
          },
          success: (resultData) => {
            console.log(resultData)
            if (resultData.errcode == 0) {
              this.title = resultData.data.title
              this.content = resultData.data.content
              this.money = resultData.data.money
              this.destination = resultData.data.destination
              this.tour_date = resultData.data.tour_date
              this.day = resultData.data.day
              this.personal_relationship = resultData.data.personal_relationship
              if (resultData.data.image == undefined || resultData.data.image == '') {
                this.imgArr = [];
              } else {
                console.log(resultData.data.image.replace('https://', '//'))
                var array = [];
                array[0] = resultData.data.image.replace('https://', '//');
                this.imgArr = array
                console.log(array);
                // this.imgArr = resultData.data.image.replace('https://', '//');
              }
              this.label = resultData.data.label
            } else {
              this.$dialog.toast({mes: resultData.errmsg})
            }
            // this.outdata = resultData.data.results;
          }
        });
      };
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        window.location.href = this.API.wx.justurl + 'http://dlqt.juyouhx.com/huludaoweixin/#/addnotes';
      } else {
        console.log('app');
        console.log(this.store.get(this.STORECONST.LOGININFO))
        if (this.store.get(this.STORECONST.LOGININFO) == undefined) {
          this.$dialog.alert({mes: '请登录'});
          this.$router.push({path: 'Register'});
        }
      }
    },
    methods: {
      // 判断包含某字符串
      isContains(str, substr) {
        return str.indexOf(substr) >= 0;
      },
      // 获取图片地址
      async getOssPath() {
        let gdetail = []
        // 如果使用循环,不能是用 foreach 解析
        // this.imgArr = ['//hd-huludao.oss-cn-qingdao.aliyuncs.com/upload/KGLD9UN1189RHUCVA5KM0RH7R3UMFVTM.jpeg'];
        // console.log(this.imgArr);
        for (let item of this.imgArr) {
          gdetail.push(await this.upLoadFileByBase64(item))
        }
        return gdetail
      },
      async submit() {
        console.log(typeof (this.imgArr));
        let imguplist = {}
        if (this.isContains(this.imgArr[0], 'base64')) {
          // alert('走创建')
          imguplist = await this.getOssPath();
          if (imguplist && imguplist.length > 0) {
            imguplist = imguplist.join()
          } else {
            imguplist = ''
          }
        } else {
          // alert('走回显')
          imguplist = this.imgArr.join();
        }
        // console.log(JSON.parse(imguplist))
        if (this.title == '') {
          this.$dialog.toast({mes: '请输入游记标题！'});
          return;
        }
        if (this.content == '') {
          this.$dialog.toast({mes: '游记要有内容哦！'})
          return;
        }
        if (this.money == '') {
          this.$dialog.toast({mes: '请输入人均费用！'})
          return;
        }
        if (this.destination == '') {
          this.$dialog.toast({mes: '请输入目的地！'})
          return;
        }
        if (this.tour_date == '') {
          this.$dialog.toast({mes: '请输入出游日期！'})
          return;
        }
        if (this.day == '') {
          this.$dialog.toast({mes: '请输入出游天数！'})
          return;
        }
        if (this.relationship == '') {
          this.$dialog.toast({mes: '请输入相关人物！'})
          return;
        }
        if (imguplist == '') {
          this.$dialog.toast({mes: '请上传封面图片！'})
          return;
        }
        if (this.personal_relationship == '一个人') {
          this.personal_relationship = '0'
        }
        if (this.personal_relationship == '情侣、夫妻') {
          this.personal_relationship = '1'
        }
        if (this.personal_relationship == '亲子') {
          this.personal_relationship = '2'
        }
        if (this.personal_relationship == '家庭出游') {
          this.personal_relationship = '3'
        }
        if (this.personal_relationship == '和朋友') {
          this.personal_relationship = '4'
        }
        if (this.personal_relationship == '其他') {
          this.personal_relationship = '5'
        }
        imguplist = imguplist.replace('//', 'https://');
        this.datas = {
          id: this.id,
          title: this.title,
          content: this.content,
          money: this.money,
          destination: this.destination,
          tour_date: this.tour_date,
          day: this.day,
          personal_relationship: this.personal_relationship,
          image: imguplist,
          label: this.label
        }
        this.hdAjax({
          url: this.API.createTravels,
          method: 'POST',
          data: this.datas,
          success: (resultData) => {
            console.log(resultData)
            if (resultData.errcode == 0) {
              this.$dialog.toast({mes: '提交成功，请等待审核!'});
              this.$router.push({path: 'myNotesList'});
            } else {
              this.$dialog.toast({mes: resultData.errmsg})
            }
            // this.outdata = resultData.data.results;
          }
        });
      },
      updateData(e = '') {
        this.content = e;
        console.info(e);
      },
       /**
     * 返回图片
     * @files 文件对象
     * @srcs 图片 src 数组
     */
      imageChange(files) {
        const reader = new FileReader();
        // 读取图片
        reader.onload = (e) => {
          let src = e.target.result;
          // 添加图片预览
          this.addImage(src)
        }
        reader.readAsDataURL(files[0]);
      },
      // 添加图片
      addImage(src) {
        // 赋值给 img 以 base64 形式显示
        this.imgArr.push(src)
        console.log(this.imgArr)
      },
      // 删除图片
      deleteImage(index) {
        // 删除图片
        this.imgArr.splice(index, 1)
        console.log(this.imgArr)
      }
    }
  }
</script>   